<!-- 实习协议模板配置页面 -->
<template>
  <PageHeaderNew
    :title="title"
    :breadCrumb="breadCrumb"
    :isShowBtn="true"
    show-back
  >
    <template #buts>
      <a-button type="primary" @click="add">新增模板</a-button>
      <!-- <a-button type="outline">引用组织模板库</a-button> -->
    </template>
  </PageHeaderNew>

  <div class="contain">
    <TableTurn ref="tableRef" :tableData="templateData">
      <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="150" title="模板名称" dataIndex="name">
        <template #cell="{ record }">
          {{ record.organizationTemplateModel.name }}
        </template>
      </a-table-column>
      <a-table-column :width="150" title="评价总分" dataIndex="patternId">
        <template #cell>
          {{ name }}
        </template>
      </a-table-column>
      <a-table-column :width="150" title="描述" dataIndex="remark">
        <template #cell="{ record }">
          {{ record.organizationTemplateModel.remark }}
        </template>
      </a-table-column>
      <!-- <a-table-column :width="150" title="创建人" dataIndex="remark">
        <template #cell="{ record }">
          {{ record.organizationTemplateModel.remark }}
        </template>
      </a-table-column>
      <a-table-column :width="150" title="创建时间" dataIndex="remark">
        <template #cell="{ record }">
          {{ record.organizationTemplateModel.remark }}
        </template>
      </a-table-column> -->
      <a-table-column :width="150" title="启用状态" dataIndex="enable">
        <template #cell="{ record }">
          <span
            :style="{
              color: record.enable === 2 ? 'red' : ''
            }"
          >
            {{ record.enable === 1 ? '是' : '否' }}
          </span>
        </template>
      </a-table-column>
      <a-table-column :width="200" title="是否为默认模板" dataIndex="required">
        <template #cell="{ record }">
          <a-switch
            :checked-value="1"
            :unchecked-value="2"
            v-model="record.required"
            @change="stateChange(record)"
          />
        </template>
      </a-table-column>
      <a-table-column title="操作" :width="200" fixed="right">
        <template #cell="{ record }">
          <a-space :size="0">
            <a-tooltip content="复制">
              <IconFont
                type="icon-fuzhi"
                :size="26"
                :style="{
                  cursor: 'pointer'
                }"
                @click="copy(record)"
              />
            </a-tooltip>
            <a-tooltip content="编辑">
              <IconFont
                type="icon-edit"
                :size="26"
                :style="{
                  cursor: 'pointer'
                }"
                @click="goEdit(record)"
              />
            </a-tooltip>
            <a-tooltip content="删除" position="left">
              <a-popconfirm
                content="是否确认删除该条数据?"
                position="left"
                @ok="del(record.id)"
              >
                <IconFont
                  type="icon-delete"
                  :size="26"
                  :style="{
                    cursor: 'pointer'
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </a-space>
        </template>
      </a-table-column>
    </TableTurn>
    <!-- <FormTemplate
      :data="currRecord"
      ref="templateRef"
      :pattern-id="id"
      :tab-code-list="tabCodeList"
    ></FormTemplate> -->
  </div>
</template>

<script lang="ts" setup>
import {
  GetDepartmentTemplate,
  PutOrganizationTemplateState
} from '@/apis/management/organization/baseSetting/organizationalType/index';
// import { GetControl } from '@/apis/management/base';
import { useSetupFormStore } from '@/store';
import { Message } from '@arco-design/web-vue';
import FormTemplate from './Components/FormTemplate/index.vue';
import { cloneDeep } from 'lodash';

const name = useRoute().query.name; // 组织类型名字
const breadCrumb = ['人事', '基础设置', '实习期设置', `实习协议模板配置`];
const title = `实习协议模板配置`;
const store = useSetupFormStore();
let tableRef = ref();
let templateRef = ref();

// 具体要展示哪种业务控件
const tabCodeList = [
  'allComponent',
  'baseComponent',
  'businessComponent',
  'organizationComponent'
];

// 储存当前数据
const currRecord: any = reactive({
  templateRequest: {},
  level: 1,
  information: [],
  list: {
    organizationTemplateModel: {
      collectionModel: [
        {
          componentModel: []
        }
      ]
    }
  }
});

// 基础信息默认控件枚举
const baseSettingEnum = [
  'ORGANIZATION_NAME',
  'ORGANIZATION_TYPE',
  'ORGANIZATION_ABBREVIATION',
  'ORGANIZATION_SUPERIOR',
  'ORGANIZATION_LEADER',
  'ORGANIZATION_HEADCOUNT',
  'ORGANIZATION_SECOND_LEADER',
  'ORGANIZATION_ADDRESS',
  'ORGANIZATION_LEGAL_PERSON',
  'ORGANIZATION_VIRTUAL',
  'ORGANIZATION_CODE_CERTIFICATE'
];

// 默认模板组件;
const defaultForm: any = [
  {
    componentModel: []
  }
];

// 点击新增模板按钮
const add = async () => {
  try {
    // const res = cloneDeep(await GetControl());
    // res.forEach((item: any) => {
    //   if (baseSettingEnum.includes(item.code)) {
    //     item.isMust = 1;
    //     item.required = 1;
    //     item.enable = 1;
    //     item.isDefault = 1;
    //     defaultForm[0].componentModel.push(item);
    //   }
    // });
    // console.log(defaultForm);
    // store.templateType = 1; // 组织类型模板传1
    // currRecord.list.organizationTemplateModel.collectionModel = defaultForm;
    // templateRef.value.fullScreen();
  } catch (error: unknown) {
    console.log(error);
  }
};

let originData = ref(); // 储存原始数据
// 获取列表信息
const templateData = async (pageData?: any) => {
  const res = await GetDepartmentTemplate({
    // id: ID,
    ...pageData
    // patternId: id
  });
  originData.value = cloneDeep(res.content);
  // temp.content = res.content[0].organizationTemplateModel;

  return Promise.resolve(res);
};

// // 复制
const copy = (record: any) => {
  console.log(record);
};

// 编辑
const goEdit = (record: any) => {
  store.templateType = 1; // 组织类型模板传1
  currRecord.list = record;
  templateRef.value.fullScreen();
};

// 修改模板默认状态
const stateChange = async (record: any) => {
  try {
    // 获取更改状态之前的模板数据，并判断状态是否和当前的一样，如果一样则不能改成默认模板
    const temp = originData.value.find((item: any) => item.id === record.id);
    if (temp.required === 1) Message.error('必须拥有一个默认模板！');
    else
      await PutOrganizationTemplateState({
        id: record.id,
        required: record.required
      });
    tableRef.value.loadData();
  } catch (error: unknown) {
    console.log(error);
  }
};

const del = async (id: number) => {
  // try {
  // } catch (error: unknown) {
  //   console.log(error);
  // }
};
</script>

<style scoped lang="less">
.contain {
  padding: 10px 20px;
  .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    .input {
      width: 320px;
    }
  }
}
</style>
